<template >
    <div style="width: 100%;height: 100%;" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width: 100%;height: 100%;">
            <div style="width: 100%;height: 9%;display: flex;align-items: center;">
                <div class="scrollable-div" ref="scrollableDiv" @wheel="scrollHorizontally">
                    <el-radio v-for="(item,index) in allForm" :key="index" v-model="radio1" :label="item.label" border>{{
                     
                        returnTitle(index) }}</el-radio>
                </div>

                <div style="margin-left: auto;display: flex;gap:10px;">
                    <div style="display: flex; align-items: center; justify-content: center; width: 28px; "
                        class="btn_width">
                        <el-button style="width: 28px;height: 28px;" icon="el-icon-refresh-right"
                            @click="reNewDataGet"></el-button>
                    </div>
                    <div class="btn_second">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="新增一条管网至主控阀">
                            <el-button slot="reference" @click="add" icon="el-icon-plus">新增</el-button>
                        </el-popover>
                    </div>
                    <div class="btn_three">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="删除所有选中的管网至主控阀">
                            <el-button slot="reference" @click="remove" icon="el-icon-delete">删除</el-button>
                        </el-popover>
                    </div>
                </div>
            </div>
            <div
                style="height: 84.5%;position: relative; overflow: auto;padding: 10px;border: 1px solid rgb(221, 228, 239);">
                <div style="display: flex;  align-items: center; width: 100%;">
                    <div class="before"></div>
                    <div>管网至主控阀</div>
                    <div class="smallTilte">
                        <div>①了解潮流走向</div>
                        <div>②了解并拍摄周边环境</div>
                    </div>
                    <div style="display: flex;margin-left: auto;align-items: center;gap: 15px;width: 40%;">
                        <div >备注</div>

                        <el-input v-model="allForm[radio1].data.notes.content" placeholder="请输入" style="width: 90%;"></el-input>


                    </div>
                </div>
                <div class="contentPadding" style="width: 100%; display: flex; flex-wrap: wrap;gap: 1%;">
                    <div style="border-radius: 4px;border: 1px solid #DCDFE6;margin-top: 20px;width: 19.2%;height: 202px;"
                        v-for="(item, index) in allForm[radio1].data.netStillMainControllValueOne" :key="index">
                        <div style="display: flex; padding: 10px;padding-left: 30px;align-items: center;">
                            <div
                                style="width: 4px;height: 15px;background-color: rgb(24, 144, 255);margin-right: 5px;border-radius: 2px;">
                            </div>
                            <div>{{ item.title }}</div>
                        </div>
                        <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                        <div style="width: 100%;justify-content: center;padding: 20px;padding-left: 33px; ">

                            <div style="display: flex;gap:25px;text-align: center;">

                                <div style="width: 100%;height: 120px;position: relative;" class="demo-image__error">
                                    <el-image v-show="netStillMainControllValueOne[index].imageAddress.length > 0"
                                        style="width: 100%;height: 100%;"
                                        :src="netStillMainControllValueOne[index].imageAddress[0]"
                                        :preview-src-list="netStillMainControllValueOne[index].imageAddress">
                                        <div slot="error" class="image-slot">
                                            <img src="../../assets/images/stageIcon/加载失败.jpeg" alt=""
                                                style="width: 100%;height: 100%;">
                                        </div>

                                    </el-image>
                                    <img v-show="netStillMainControllValueOne[index].imageAddress.length == 0"
                                        src="../../assets/images/stageIcon/暂无图片.png" alt=""
                                        style="width: 100%;height: 100%;">
                                    <div class="imageSample"
                                        v-show="netStillMainControllValueOne[index].imageAddress.length > 0">范例图</div>
                                </div>
                                <div style="width: 100%;height: 120px;">
                                    <imageLook :upAddress="item.upAddress" :imageData="item.imageData"
                                        :projectInfo="projectInfo" :id="stageSurveyPeripheralMppnList[radio1].id"
                                        :dictName="item.dictName" :sampleImageAll="netStillMainControllValueOne"
                                        :imageIndex="index" :flieName="item.title"></imageLook>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <el-button class="buttonStyle" @click="submit">保存</el-button>
        </div>
    </div>
</template>
<script>
import { getInfo } from "@/api/project/info";
import imageLook from "../OtherOwerUseComponent/imageLook.vue";
import { getTemplateFileListApi } from "@/api/project/file";
import { updateSurveyApi } from "@/api/project/survey";
import { getOutMidPressure, addGetOutMidPressure, removegetOutMidPressure } from "@/api/project/stageApi";
import { connect } from 'echarts';
export default {
    ///当组件被创建之后立马执行的操作
    created() {
        const projectId = this.$route.params && this.$route.params.projectId;
        this.getInfo(projectId);
    },
    props: ['jsonData', 'imageData'],
    watch: {
        // projectInfo: {
        //     handler(newData, oldData) {
  
        //         this.reNewData()
        //     },

        // },


        imageData: {
            handler(newData, oldData) {



            },
            immediate: true // 立即触发一次，以便在初始值传递时也能运行方法
        },
    },
    data() {

        return {
            loading: false,
            projectInfo: {},
            ///所有数据
            stageSurveyPeripheralMppnList: [],
            //之后删除
            checked: '',
            //之后删除
            input: '',
            allForm: [

            ],
            ///单选框的使用变量
            radio1: 0,

            imageFlieLocation: "勘察范例/外围中压管网/管网至主控阀/",
            netStillMainControllValueOne: [
                { id: 0, title: "现场图片", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/现场照片', imageData: {}, imageHint: '现场照片', description: '沉降描述', content: null, dictName: 'noHiddenDangers' },
                { id: 1, title: "沉降", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/沉降', imageData: {}, imageHint: '隐患图片', description: '沉降描述', content: null, dictName: 'settlement' },
                { id: 2, title: "管道暴露", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/管道暴露', imageData: {}, imageHint: '隐患图片', description: '管道暴露描述', content: null, dictName: 'pipelineExposure' },
                { id: 3, title: "施工工地", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/施工工地', imageData: {}, imageHint: '隐患图片', description: '施工工地描述', content: null, dictName: 'constructionSite' },
                { id: 4, title: "植被", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/植被', imageData: {}, imageHint: '隐患图片', description: '植被描述', content: null, dictName: 'vegetation' },
                { id: 5, title: "重型机械碾压", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/重型机械碾压', imageData: {}, imageHint: '隐患图片', description: '重型机械碾压描述', content: null, dictName: 'heavyDutyWorkshop' },
                { id: 6, title: "容易触碰地方", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/容易触碰地方', imageData: {}, imageHint: '隐患图片', description: '容易触碰地方描述', content: null, dictName: 'easyTouch' },
                { id: 7, title: "化粪池", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/化粪池', imageData: {}, imageHint: '隐患图片', description: '化粪池描述', content: null, dictName: 'septicTank' },
                { id: 8, title: "地铁线", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/地铁线', imageData: {}, imageHint: '隐患图片', description: '地铁线描述', content: null, dictName: 'subwayLine' },
                { id: 9, title: "电力电缆交汇处", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/电力电缆交汇处', imageData: {}, imageHint: '隐患图片', description: '电力电缆交汇处描述', content: null, dictName: 'powerCableIntersection' },
                { id: 10, title: "雨污管交汇处", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/雨污管交汇处', imageData: {}, imageHint: '隐患图片', description: '雨污管交汇处描述', content: null, dictName: 'waterPipeIntersection' },
            ]
        }
    },
    name: "outMidPressureNet",
    methods: {
        returnTitle(index){
            
            if (this.allForm[index].data.notes.content!=null){
                return this. allForm[index].data.notes.content
            }
            return '园区外围中压管网'+(index+1) 
        },
        reNewDataGet() {
            this.loading = true
            this.getImage('勘察范例/园区外围中压管网/管网至主控阀')
            this.reNewData()

        },
        getInfo(projectId) {
            getInfo(projectId).then(response => {
                this.projectInfo = response.data;
                this.reNewData()
            })
        },
        reNewData() {

            getOutMidPressure(this.projectInfo.projectId).then(response => {
                this.loading = false
                this.stageSurveyPeripheralMppnList = response.data
                this.distrbute()

            })
        },
        distrbute() {

            // this.loading=true
            this.allForm = []
            for (let i = 0; i < this.stageSurveyPeripheralMppnList.length; i++) {
                let netStillMainControllValueOne = [
                    { id: 0, title: "现场照片", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/现场照片', imageData: {}, imageHint: '现场照片', description: '沉降描述', content: null, dictName: 'noHiddenDangers' },
                    { id: 1, title: "沉降", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/沉降', imageData: {}, imageHint: '隐患图片', description: '沉降描述', content: null, dictName: 'settlement' },
                    { id: 2, title: "管道暴露", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/管道暴露', imageData: {}, imageHint: '隐患图片', description: '管道暴露描述', content: null, dictName: 'pipelineExposure' },
                    { id: 3, title: "施工工地", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/施工工地', imageData: {}, imageHint: '隐患图片', description: '施工工地描述', content: null, dictName: 'constructionSite' },
                    { id: 4, title: "植被", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/植被', imageData: {}, imageHint: '隐患图片', description: '植被描述', content: null, dictName: 'vegetation' },
                    { id: 5, title: "重型机械碾压", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/重型机械碾压', imageData: {}, imageHint: '隐患图片', description: '重型机械碾压描述', content: null, dictName: 'heavyDutyWorkshop' },
                    { id: 6, title: "容易触碰地方", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/容易触碰地方', imageData: {}, imageHint: '隐患图片', description: '容易触碰地方描述', content: null, dictName: 'easyTouch' },
                    { id: 7, title: "化粪池", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/化粪池', imageData: {}, imageHint: '隐患图片', description: '化粪池描述', content: null, dictName: 'septicTank' },
                    { id: 8, title: "地铁线", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/地铁线', imageData: {}, imageHint: '隐患图片', description: '地铁线描述', content: null, dictName: 'subwayLine' },
                    { id: 9, title: "电力电缆交汇处", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/电力电缆交汇处', imageData: {}, imageHint: '隐患图片', description: '电力电缆交汇处描述', content: null, dictName: 'powerCableIntersection' },
                    { id: 10, title: "雨污管交汇处", imageAddress: [], upAddress: '外围中压管网/管网至主控阀/雨污管交汇处', imageData: {}, imageHint: '隐患图片', description: '雨污管交汇处描述', content: null, dictName: 'waterPipeIntersection' },
                ]
                for (let n = 0; n < netStillMainControllValueOne.length; n++) {
                    netStillMainControllValueOne[n].content = this.stageSurveyPeripheralMppnList[i][netStillMainControllValueOne[n].dictName]

                    ///描述
                }
                let notes =
                    { dictName: 'notes', placeholder: '请输入', isNumTypeInput: false, content: null }
                notes.content = this.stageSurveyPeripheralMppnList[i].notes
                var dict = { data: {}, label: this.allForm.length }
                dict.data['netStillMainControllValueOne'] = netStillMainControllValueOne
                dict.data['notes'] = notes
                this.allForm.push(dict)
            }
            this.getImage('勘察范例/园区外围中压管网/管网至主控阀')
        },
        ///移除操作
        remove() {

            ///删除操作
            if (this.allForm.length > 1) {
            let id = this.stageSurveyPeripheralMppnList[this.radio1].id
            removegetOutMidPressure(id).then(response => {
                if (response.code == 200) {
                    if (this.allForm.length - 1 == this.radio1) {
                        this.radio1 = this.radio1 - 1
                    }
                    this.reNewData()

                }
            })
        }


        },
        ///新增操作
        add() {
     

            let stageSurvey = { projectId: this.projectInfo.projectId }

            
            addGetOutMidPressure(stageSurvey).then(response => {
                if (response.code == 200) {
                    this.reNewData()
                }
            })


        },
        scrollHorizontally(event) {
            event.preventDefault();
            const scrollAmount = event.deltaY;
            this.$refs.scrollableDiv.scrollLeft += scrollAmount;
        },

        open() {
            this.$alert('提交外围中压管网成功', '提交成功', {
                confirmButtonText: '确定',

            });
        },
        //提交
        submit() {
            //修改已有的
            this.loading = true
            let all = { stageSurveyPeripheralMppnList: [] }
            for (let i = 0; i < this.stageSurveyPeripheralMppnList.length; i++) {
                var stageSurvey = { projectId: this.projectInfo.projectId, id: this.stageSurveyPeripheralMppnList[i].id }

                if (this.allForm[i].data['notes'].dictName != '') {
                    stageSurvey[this.allForm[i].data['notes'].dictName] = this.allForm[i].data['notes'].content
                }

                all.stageSurveyPeripheralMppnList.push(stageSurvey)
            }

       
            updateSurveyApi(all).then(response => {
                this.loading = false
                if (response.code == 200) {
                    this.open()
                }
            })

        },

        getImage(path) {

            let netStillMainControllValueOne = [
                { id: 0, title: "现场照片", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/现场照片', imageData: {}, imageHint: '现场照片', description: '沉降描述', content: null, dictName: 'noHiddenDangers' },
                { id: 1, title: "沉降", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/沉降', imageData: {}, imageHint: '隐患图片', description: '沉降描述', content: null, dictName: 'settlement' },
                { id: 2, title: "管道暴露", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/管道暴露', imageData: {}, imageHint: '隐患图片', description: '管道暴露描述', content: null, dictName: 'pipelineExposure' },
                { id: 3, title: "施工工地", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/施工工地', imageData: {}, imageHint: '隐患图片', description: '施工工地描述', content: null, dictName: 'constructionSite' },
                { id: 4, title: "植被", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/植被', imageData: {}, imageHint: '隐患图片', description: '植被描述', content: null, dictName: 'vegetation' },
                { id: 5, title: "重型机械碾压", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/重型机械碾压', imageData: {}, imageHint: '隐患图片', description: '重型机械碾压描述', content: null, dictName: 'heavyDutyWorkshop' },
                { id: 6, title: "容易触碰地方", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/容易触碰地方', imageData: {}, imageHint: '隐患图片', description: '容易触碰地方描述', content: null, dictName: 'easyTouch' },
                { id: 7, title: "化粪池", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/化粪池', imageData: {}, imageHint: '隐患图片', description: '化粪池描述', content: null, dictName: 'septicTank' },
                { id: 8, title: "地铁线", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/地铁线', imageData: {}, imageHint: '隐患图片', description: '地铁线描述', content: null, dictName: 'subwayLine' },
                { id: 9, title: "电力电缆交汇处", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/电力电缆交汇处', imageData: {}, imageHint: '隐患图片', description: '电力电缆交汇处描述', content: null, dictName: 'powerCableIntersection' },
                { id: 10, title: "雨污管交汇处", imageAddress: [], upAddress: '勘察范例/园区外围中压管网/管网至主控阀/雨污管交汇处', imageData: {}, imageHint: '隐患图片', description: '雨污管交汇处描述', content: null, dictName: 'waterPipeIntersection' },
            ]
            this.netStillMainControllValueOne = netStillMainControllValueOne

            getTemplateFileListApi(path).then(response => {
                if (response.code == 200) {
                    if (response.data.length != 0) {

                        Array.from(response.data).forEach(item => {
                    

                            for (var i = 0; i < this.netStillMainControllValueOne.length; i++) {

                                if (this.netStillMainControllValueOne[i].upAddress == item.fileTreePath) {

                                    Array.from(item.fileList).forEach(items => {

                                        this.netStillMainControllValueOne[i].imageAddress.push(this.$myGlobalVariable + items)
           
                                    })
                                }
                            }

                        }

                        );
                     
                    }
             
                }
            })
        },

    },
    mounted() {

    },
    components: {
        imageLook
    }
}
</script>
<style>
.btn_width .el-button--medium {
    width: 28px;
    height: 28px;
    padding: 0;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
    color: rgb(24, 144, 255);
}

.btn_second .el-button--medium {
    width: 71px;
    height: 28px;
    padding: 0;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 4px 4px;
    color: rgb(24, 144, 255);
}

.btn_three .el-button--medium {
    width: 71px;
    height: 28px;
    padding: 0;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 4px 4px;
    color: rgb(24, 144, 255);
}

.horizonDIsplay {
    width: 33.33333333%;
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 30px;
    /* background-color: red;
    height: 50px; */
}

.imageSample {
    position: absolute;
    top: 80%;
    left: 0px;
    width: 100%;
    height: 20%;
    background-color: rgba(96,98,102,0.9);
    /* 设置透明度和颜色 */
    text-align: center;

    color: rgba(251, 251, 251, 1);
}

.scrollable-div {
    padding: 5px;
    overflow-x: auto;
    white-space: nowrap;
    width: 88%;
}

.contentPadding .el-card__body {
    padding: 0px;
}

.smallTilte {
    font-size: 14px;
    font-weight: 400;
    color: #909399;
    display: flex;
    margin-left: 15px;
    gap: 15px;
}</style>